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Introduction 


Computer typography. The language and structure of this course has been kept lucid and simple, keeping in mind 
Indian undergraduate students of art and design. 


There are two aspects of computer typography that we would be looking at are: 

* Basics of Computer Fonts: which would introduce students to the various ways in which fonts are represented 
in a computer, and 

¢ Using Computer Fonts: which would detail how computer fonts can be used. 


We must begin by defining what typography is. The word typography comes from the combination of two Greek 
words; “Typos” which means ‘a dent, an impression, or a mark’ and “graphy”which means ‘writing’. The word orig- 
inally meant writing by making impressions. Over the years a broader definition of typography has been derived. 
It can hence be stated as: 


“Typography is the process of setting and arranging text for a combination of aesthetic and functional goals”. 
This process involves two activities: 


1. Selecting the Fonts: 

There are a huge number of fonts available today. Selecting the right ones is one of the primary decisions that a 
graphic designer has to take. This decision of selecting the fonts to be used can be based on several factors. Font 
selection depends largely on the aesthetic preference of the graphic designer and the function or purpose (medi- 
um and context) for which fonts need to be used. The cost of the font and the size of its family and the number of 
variations available can also be considered while selecting fonts. 


2. Arranging or Placing the Text and Using the Fonts: 

In graphic design parlance this is called composing the text or typesetting. This includes deciding the size of the 
page, the margins for the text to be set. The sizes, positions and orientations of the various kinds of texts, such 
as headings, body copy etc. Typesetting also involves setting the distance between two lines of text; which in 
graphic design terms is called leading. How the text would be aligned (left, right or center) is an integral part of 
typesetting. 


Good typography does not necessarily mean the use of beautiful letters. Typography is meant to ease the read- 
ing process and help the reader read the text with the least possible amount of effort. Hence, the larger goal of 
typography is to help the author communicate effectively with the audience and facilitate the comprehension of 
the text. 
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Assignment 1: 

In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

« After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q1. What is a symbol, a character, a letter and a glyph? 
How would you describe the Devanagari ® ? 
When is it a character, letter and a glyph? 
Can we call it an alphabet? 


Q2. Define or describe what a typeface, a font, a font family and a typeform are? 
What are the relationships between these terms? 


Q3. Describe in your own words the similarities, differences and the relationships between: 
Typography, Lettering and Calligraphy. 
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Pre-computer Typography: Letterpress: 

In the early days of typography, letters were printed using blocks of wood or metal. The blocks were known as 
movable type; since they could be moved around and joined to create words, lines and paragraphs. Technically 
this process of printing is called letterpress printing—where raised reversed blocks of letters were smeared with 
ink and then pressed against paper to produce an impression of the text. The advantage that they had over tra- 
ditionally hand written calligraphic manuscripts was that they could be mass produced and the blocks of metal 
could be reused over and over again for different books. 


Xylography: 

Printing texts or illustrations with wooden blocks is called Xylography (the word comes from the combination of 
the Greek words, xylon which means ‘wood’ and graphy which means writing; another word with the similar roots 
is calligraphy; callis in Greek means ‘beautiful’. Calligraphy hence means beautiful writing). 


These metal blocks contain a raised portion which had an inverted image of the letter to be printed. The vertical 
height of the metal block was the size of the typeface, which meant large blocks of metal were used for large 
text and smaller blocks for smaller text. These blocks of letters were kept in wooden boxes called type cases. The 
terms upper-case for capital letters and lower-case for smaller letters is derived from the positions where these 
letters were placed in the type cases. These solid metal letters have a specialized terminology to describe various 
features within them. 

Face 


Counter 


Shank 


Groove Nick 


Size of the 
Typeface 
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A photograph of a word created by combining three letterpress sorts is also shown here: 


Typesetting Machines: 

The process of combining (composing) words, lines and pages for letterpress was done manually, and the com- 
poser had to place each and every block on a ‘composing stick’. Setting books, which contained thousands of 
words and hundreds of pages this process, was found to be cumbersome and extremely time consuming. In the 
early portion of the nineteenth century, several individuals tried to solve this problem, by inventing ‘typesetting 
machines’ which would reduce the time and effort taken for composing metal types. This process of printing was 
called ‘mechanical typesetting’ or ‘hot metal typesetting’ since ‘hot’ molten metal was poured into letter molds to 
create ‘sorts’ or ‘slugs’ of words or lines, which were then used for printing. Hot metal printing drastically changed 
the way printing was done, the speed and effort to print was considerably reduced, this was especially beneficial 
for the newspaper industry. 
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Book Making Process: 
The entire book making process through mechanical typesetting is illustrated in the following video. 


Printing a Book, Old School 


Assignment 2: 

* In the given assignment, please try and answer the following questions. 

¢ Use the available books in your library, online sources or talk to experienced graphic/ type 

+ After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q3. What were the similarities and differences between the Linotype, Monotype and Intertype, mechanical type- 
setting machines? 


Q4. Find and discuss about the Indian engineer who invented a mechanical typesetting 
Q5. Discuss the impact of mechanical typesetting on publishing industry in India. Try and cover the effect on 


economic aspects of these machines, the typographic quality sand requirements of Indian scripts, the cultural 
acceptance of machines, and the production processes of newspapers in pre and post-independence India. 
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Phototypesetting 


Pre-computer Typography: Phototypesetting: 

The invention of Photography influenced the visual arts considerably. Its invention brought about next stage in 
the technological development of text composition which was photo-typesetting. In Photo-composition or pho- 
to-typesetting, text was composed using photographic process on photosensitive paper. This method of typeset- 
ting was also referred to as ‘cold type’ technology as against the ‘hot-metal’ mechanical typesetting. 


The process of photo-composition typically developed the matter to be printed (either as a negative or as a 
positive) by passing light through a lens and a transparent surface onto photosensitive material. The transpar- 
ent surface was known as a font disc and was a film negative with the font characters. When a letter needed to 
be printed was selected, the font disc would rotate to the letter position on the font disc. Size of the letter was 
controlled by choosing an appropriate lens, which would reduce or enlarge the image received through the font 
disc. There were many methods by which size of the letters was controlled. In some machines lenses were used 
to enlarge or reduce size; in others the font disc itself had different masters for various sizes and the font disc 
itself was changed for changing sizes. At times multiple sizes were placed on a single master font disc. 


The main advantage of photocomposition was that it provided greater economy and efficiency of space over hot 
metal. The output of photo composting machines was clearer and sharper than hot metal, and they required less 
maintenance. Furthermore it allowed greater flexibility in font size and forms for graphic designers. Over time 
they eventually became faster, cheaper and more efficient in terms space, money and time in comparison to the 
hot metal composition machines. 


Due to its popularity the technology of photocomposition evolved rapidly, within this usually four generations of 
photo-typesetting technologies are recognized. 


¢ Photo-Mechanical Machines (Photo-Imaging) 
¢ Electro-Mechanical Machines (Photo-Optics) 
* Cathode Ray Tube Machines (Photo Scan) and 


¢ Laser Setters (Digital Scan) 


Photo-Mechanical Machines (Photo-Imaging): 

These were the first generation of machines that evolved from the earlier hot-metal composition machines. The 
metal matrices in the hot metal machines were replaced by glass matrices with the images of letters. The metal 
caster was replaced with a photographic system. The system was mechanical in nature and achieved a small but 
significant improvement in typesetting speed. Some of these machines - like the later hot metal composition 
machines - used to control text composition by means of a perforated tape. The text was at times composed 
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(mechanically punched on a tape) on a separate machine and was then fed to the reproduction machine which 
would reproduce the letters according to the punched tape. 


Electro-Mechanical Machines (Photo-Optics): 

‘Electro-Mechanical Machines’ were the second generation of machines which reduced the number of mechanical 
(moving) parts of the machines and replaced them by electronic parts such as electromagnets. Instead of using 
perforated (punched) tape to control text composition, magnetic tape was used to enter and compose text. 


Cathode Ray Tube Machines (Photo Scan) and Laser Setters (Digital Scan): 

‘Cathode Ray Tube Machines’ and ‘Laser Setters’ were the third and fourth generation of machines which were 
almost completely electronic in their working and had very few mechanical parts in them. These arrived in the 
early 1960's and used a cathode ray rube to read commands and imprint letters on to a photographic film. These 
machines, such as the Lintron 303 had dramatically increased the character input rate - on an average these ma- 
chines could set anywhere between 200-400 lines per minute. 


Assignment 3: 

- In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q7. Besiders a clearer, sharper and faster output, what other typographical features could be achieved by pho- 
to-typesetters which were not possible before on hot-metal machines? 


Q8. Enumerate how the typography of the Indian scripts benefited by the development of phototypesetter. If 
possible, list down popular photo-typesetters used by Indian publishers and Newspapers. 


Q9. Many type foundries designed typefaces for Indian scripts for use on photo-typesetters; list the most popu- 
lar type foundries and their typefaces. 
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Digital Type: Fonts 


The advent of digital typography can be attributed to the introduction of the Macintosh personal computer 

by the Apple Corporation in 1984. The conversion of text from metal to electronic signals was possible in the 
late-phototypesetting machines. The novel invention here was the development of WYSIWYG (what you see is 
what you get) editors. Artwork could now be easily manipulated using a graphical interface with the help of a 
mouse. Commands such as copy, paste, duplicate, undo etc. brought about higher levels of flexibility and efficien- 
cy amongst designers. This ease of use and flexibility allowed people of various backgrounds to become design- 
ers. Systems that used computers to input, edit, design and publish texts were then called Desktop Publishing 
(DTP) units. They were called so because, unlike their predecessors these machines could easily fit on a regular 
desk top. Software development in the later years produced products such as Adobe Photoshop which allowed 
easy manipulation of images while Adobe InDesign and QuarkXpress were layout programs made for publication 
design. 


Since a new medium was born, two new uses of fonts were seen. Firstly, in their traditional role, fonts that would 
be set on the computer but their final output was to be print. Secondly, fonts that would be seen only on the 
screen. Fonts also became sophisticated in the information that they contained. Earlier letter press fonts con- 
tained only the visual data (the shape) of the letters and some spacing information. Computer fonts on the other 
hand, these days contain much more information than their ancestors. 


A computer font is a digital data file that can typically contain five kinds of information. 


1. Information regarding the name, creator, publisher, copyright information and other identifying fea __ tures of 
the font. 

2. The actual drawings of the letters and signs that make up the font. 

3. Spacing (kerning) information that is used while using the font. 

4. Glyph positioning and substitution information that tells the software how the glyphs of the font are posi- 
tioned or substituted in specific contexts. 

5. Hinting information, that specifies how the letters are rendered on low resolutions. 


At the fundamental level all data within a computer is stored in the form of numbers. Text is also stored as num- 
bers. This storage requires the text to be encoded. 


Encoding is the process in which a number is assigned to a particular character or visual mark. The assigned num- 
ber is hence called a character code. The scheme which is used to assign codes to a set of characters is called an 
encoding scheme. 
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ee h In the ASCII (American Standard code for Information Exchange) encoding scheme, the lower case Latin letter ‘a’ 
Digita Typogra p y -1 is represented by the number (code): 61. A piece of text is hence represented in a computer as a series of charac- 
Understanding Type as Bits ter codes, each code stands for a unique visual mark which can be a letter, symbol or other signs. 
by 
Prof. Girish Dalvi While rendering (displaying a piece of text in a particular document) the character codes are read and shown 
IDC, IIT Bombay with a particular font. Diagramatic representation of the process is shown below: 


Charset - Character Encoding 


001001000100100010011101111001 
: 110011100100100101110011111011 
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Assignment 4: 

- In the given assignment, please try and answer the following questions. 

* Use the available books in your library, online sources or talk to experienced graphic/ type designers. 

+ After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q10. Find as many encoding schemes as you can? Discuss the advantages and disadvantages of each of them. List 
and discuss 3 encoding schemes for Indian Scripts. 


Q11. What encoding scheme would you use when you create a font for an Indian script explain with reasons. 
Q12. List and discuss advantages and disadvantages of various typesetting software? What all software besides 


QuarkxXpress and InDesign can be used to design and typeset books. Discuss open source software solutions for 
the same. 
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Digital Typography - 1 


Understanding Type as Bits Letters within a text can be displayed in a variety of shapes. The shape of a letter forms is the most important 


by part of a font. In computer fonts, two representations (storage mechanisms) of fonts are possible. 
Prof. Girish Dalvi The two kinds of fonts seen on a computer are: 
IDC, IIT Bombay * Raster Fonts which are also known as Bitmap Fonts and 
¢ Vector Fonts. 
In this section we'll look at Raster fonts. In a raster font, the shape of a character is stored in a two-dimensional 
array of cells. Each cell in this array is called a pixel or picture element. The shape of the letter is displayed on the 
eaare screen by turning the pixels within this array on and off, or by filling them with various colour shades. The num- 


ber of pixels used to define the shape of the letter or image is called the resolution of the image. The earliest 


bcp { wraswid sures in/ course digitalltypography 1! computer systems used raster fonts for the display of information. 
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Advantages: 

Raster fonts are extremely fast and simple to render since they require very little resources to store and render. 
The load on the computer is considerably lower than while rendering vector fonts. Raster fonts if they are not 
processed will always give the same output, so a high level of consistency is achieved in the display of informa- 
tion. In comparison with vector fonts, some type designers have argued that it is easier to create raster fonts 
than other kinds due to their relative simplicity. 


Disadvantages: 

Raster fonts usually have a poor visual quality when compared with vector fonts. This visual quality can become 
worse when they are scaled (size is changed) or transformed. These fonts are usually designed for a particular 
size. Scaling and transformation procedures (algorithms) can get very complex for the computer. 


Usage: 

Raster fonts are probably not used as much as vector fonts when it comes to commercial designs. But there are 
several instances where widespread usage of raster fonts is seen. On some computers, all textual interfaces: 
command prompts, BIOS setups, and boot configuration information is displayed in raster fonts. Besides this in 
Windows and Linux machines, the error and recovery console displays use Raster fonts. Low-end mobile phones 
(and the now obsolete pagers) also use raster fonts for their entire interface. Due to their small size, raster fonts 
were often stored and used in dot matrix printers. 


Assignment 5: 

- In the given assignment, please try and answer the following questions. 

+ Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
After noting down the answers, please discuss your answers with your colleagues and faculty members. 


There is a possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 
stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
but undergraduates should nonetheless attempt to answer them. 


Q13. Which file formats are used to store raster fonts? 
Find out which operating systems and DTP publication software allowed the use of raster fonts? 


Q14. List and discuss ten popular Raster fonts? Elaborate on their settings and context of use. Are there any exist- 
ing fonts which were originally created as raster fonts but have now been made into vectors? 
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Digital Type: Vector Fonts 


The two kinds of fonts seen on a computer are: 
* Raster Fonts which are also known as Bitmap Fonts and 
e Vector Fonts 


The earliest fonts created and used on a computer were raster fonts, which are coarse in nature. Later on Vector 
Fonts were developed which are much finer than raster fonts. A vector font stores the shape of the letter in the 
form of a mathematical formula. The shapes of the letters are created and stored as a combination of bézier 
curves. The bézier curve is represented as a mathematical equation, the shape of the curve changes according to 
the values assigned to parameters within the bézier curve equations. 


There are two kinds of vector fonts. 
¢ The predominantly used Vector Outline fonts and 
e The lesser known Stroke Based Vector fonts 


Outline Fonts: 

Most of the fonts that are currently used in computer systems are outline fonts. They are computer files, which 
store the image of the glyph as vector shapes. The resolution independent vector shapes are defined by an 
outline (the lines define the edge of the shape) covering the glyph. If the font is a Postscript Font then the shape 
is defined by bézier curves, whereas True-Type fonts are defined by quadratic splines. A typical letter from an 
outline vector font is shown below. 


end point, anchor point, node line segment 


control points, 
control handles 


J 
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Design Course Stroke Based Fonts: 

° Fonts which define the glyph by placing the defining vector lines along the centre of the stroke used to draw the 
Digital Typography -1 glyph are called stroke based fonts. The font stores the drawing stroke vector, on which the system can later on 
Understanding Type as Bits add various pen strokes or ‘flesh’ according to requirements. Currently very few systems use stroke based fonts. 
by 
Prof. Girish Dalvi Historically, ‘Vinyas’ was a significant interactive stroke based font development system developed by NCST, un- 
IDC, IIT Bombay der which several stroke based fonts were designed for Indian Scripts. Their main advantage lies in the number 


of storage points. Stroke based fonts require considerably less storage space than outline vector fonts. It is due 
to these reasons; that some systems use stroke fonts to represent large glyph set required for East Asian scripts 
such as Chinese, Japanese and Korean. 
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Figure 2: Multiple strokes can be added to same skeleton to get different font styles. 


Assignment 6: 
+ In the given assignment, please try and answer the following questions. 
; ¢ Use the available books in your library, online sources or talk to experienced graphic/ type designers. 
1. Introduction ¢ After noting down the answers, please discuss your answers with your colleagues and faculty members. 
2. Letterpress 
3. Phototypesetting There isa possibility that you might not reach a single unambiguous answer. The goal of the assignment is to 

x 4 stimulate a discussion rather than to come up with a definite answer. Some of the questions are purposefully 
4. Digital Type: Fonts challenging, complex and ambiguous in nature; they are meant for the more experienced students and faculty, 
5. Digital Type: Raster Fonts but undergraduates should nonetheless attempt to answer them. 
6 
7 
8 
9 


. Digital Type: Vector Fonts 
. Presentation - Slide Show 
. References 


. Video Q16. Compare outline vector fonts with stroke based vector fonts? 
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A computer font is a digital data file 
that can typically contain five kinds 
of information. 


Information regarding the name, creator, publisher, 
copyright information and other identifying 
features of the font. 


The actual drawings of the letters and signs that 
make up the font. 


Spacing (kerning) information that is to be used 
while using the font. 


Glyph positioning and substitution information 
that tells the software how the glyphs of the font 
are positioned or substituted in specific contexts. 


Hinting information, that specifies how the letters 
are rendered on low resolutions 
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Text is stored as numbers. This 
storage requires the text to be 
encoded. Encoding is the process 
in which a number Is assigned to a 
particular character or visual mark. 
The assigned number is hence 
called a character code. The scheme 
which is used to assign codes to 

a set of characters is called an 
encoding scheme. 
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While rendering (displaying a piece of text in a 
particular document) the character codes are read 
and shown with a particular font. 
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In a raster font the shape of a 
character is stored in a two- 
dimensional array of cells. 


Each cell in this array is called 
a pixel or picture element. The 
shape of the letter is displayed 
on the screen by turning the 
pixels within this array on and 
off, or by filling them with 
various shades of colours. 
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Vector Fonts are much finer than raster 
fonts. A vector font stores the shape of 
the letter in the form of a mathematical 
formula. The shapes of the letters are 
created and stored as a combination 

of bezier curves. The bézier curve is 
represented as a mathematical equation, 
the shape of the curve changes according 
to the values assigned to parameters 
within the bézier curve equations. 
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There are two kinds of vector fonts. The 
predominantly used vector outline 
fonts and the lesser known stroke 
based vector fonts. 


Most of the fonts that are currently used 
in computer systems are outline fonts. 
They are computer files, which store the 
image of the glyph as vector shapes. The 
resolution independent vector shapes are 
defined by an outline (the lines define the 
edge of the shape) covering the glyph. 
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Vector Fonts which define the glyph by 
placing the defining vector lines along 
the centre of the stroke used to draw the 
glyph are called stroke based fonts. 
The font stores the drawing stroke vector, 
on which the system can later on add 
various pen strokes or ‘flesh’ according to 
requirements. Their main advantage lies 
in the number of storage points. Stroke 
based fonts require considerably less 
storage space than outline vector fonts. 
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+ Useful resource e-links related to ‘Graphic Design’ in India 
- includes Communication Design, Publication Design and Packaging Design 


¢ International resource related to ‘Graphic Design’ 
¢ Visual Communication Design at IDC IIT Bombay 
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Contact Details: 


This documentation was done by Girish Dalvi, Ph.D. 
Student at IDC, IIT Bombay. 


You can get in touch with him at 
girish.dalvi[at]gmail.com 


You could write to the following address regarding 
suggestions and clarifications: 


Helpdesk Details: 
Co-ordinator 

Project e-kalpa 
Industrial Design Centre 
IIT Bombay 

Powai 

Mumbai 400076 

India 


Phone: 091-22-25767820/ 7801/ 7802 
Fax: 091-22-25767803 
Email: contact[at]dsource.in / dsource.in[at]gmail.com 


